<template>
	<div class="container">
		<global-header :user="currentUser"></global-header>
		<column-list :list="list"></column-list>
	</div>
  	<router-view/>
</template>

<script lang="ts">
  	import { defineComponent } from 'vue'
  	import ColumnList, { ColumnProps } from './components/ColumnList.vue'
  	import GlobalHeader, { UserProps } from './components/GlobalHeader.vue'

  	export default defineComponent({
    	name: 'App',
    	components: { ColumnList, GlobalHeader },
    	setup() {
    		const currentUser: UserProps = {
    			isLogin: true,
    			name: 'viking'
    		}
    		const list: ColumnProps[] = [
    			{
    				id: 1,
    				title: 'test1',
    				avatar: 'http://www.dell-lee.com/imgs/vue3/banner.jpg',
    				description: '测试数据1...'
    			},
    			{
    				id: 2,
    				title: 'test2',
    				avatar: 'http://www.dell-lee.com/imgs/vue3/banner.jpg',
    				description: '测试数据2...'
    			},
    			{
    				id: 3,
    				title: 'test3',
    				avatar: 'http://www.dell-lee.com/imgs/vue3/banner.jpg',
    				description: '测试数据3...'
    			}
    		]
    		return {
    			list,
    			currentUser
    		}
    	}
  	})
</script>
